<template>
	<view class="page-box pad-30">
		<view class="">
			<view class="wallet pad-40">
				<view class="color-white">
					<view class="font-26">账户余额</view>
					<view class="font-40 mar-top-5 bold">{{balanceInfo.amount}}</view>
				</view>
				<!-- <view class="centerXY">
					<view class="btn font-26 bgWhite color-primary mar-right-10">充值</view>
					<view class="btn font-26 color-white">提现</view>
				</view> -->
			</view>
		</view>
		<view class="mar-top-30 color-text font-36">余额账单</view>
		<view v-if="list.length > 0" class="list-box mar-top-30">
			<view class="bg-white radius20 pad-30 mar-top-30" v-for="item in list" :key="item.id">
				<view class="betweenX centerY font-36 color-text">
					<view v-if="item.io == 1">收入</view>
					<view v-if="item.io == 2">消费</view>
					<view class="bold">{{item.change_amount}}</view>
				</view>
				<view class="betweenX centerY mar-top-20 color-646464 font-24">
					<view>{{item.ext.out_trade_no}}</view>
					<view>余额：{{item.old_amount}}</view>
				</view>
			</view>
		</view>
		<up-loadmore margin-top="30" v-if="list.length > 0" :status="pageStatus" />
		<u-empty v-else marginTop="100" width="75" height="75" text="暂无记录" icon="/static/image/wallet.png"></u-empty>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'

	import {
		balanceLog,
		balanceDetail
	} from '@/api/index.js'

	// 获取钱包信息
	const balanceInfo = ref({})
	const getUserInfo = () => {
		balanceDetail().then(res => {
			balanceInfo.value = res.data.info;
		})
	}

	// 获取消费列表
	const params = ref({
		ps: 5,
		page: 1
	});
	// 列表数据
	const list = ref([]);
	const pageData = ref({});
	const pageStatus = ref('loadmore');
	const getPageList = () => {
		pageStatus.value = 'loading';
		balanceLog(params.value).then(res => {
			pageStatus.value = 'loadmore';
			let {
				data
			} = res;
			list.value = list.value.concat(data.data);
			params.value.page = data.current_page + 1;
			pageData.value = data;

			// 没有更多了
			if (data.next_page_url == null) {
				pageStatus.value = 'nomore'
			}
		})
	}

	// 上拉加载
	onReachBottom(() => {
		if (pageData.value.next_page_url) {
			getPageList();
		}
	})

	onLoad(() => {
		getUserInfo();
		getPageList();
	})
</script>

<style scoped>
	.wallet {
		width: 100%;
		background: url('https://file.yuanzhujiazheng.cn/upload/2024/09/26/85fcbc3e9b55a68f976efeb400407158.png');
		background-size: cover;
		height: 180rpx;
		display: flex;
		justify-content: space-between;
	}
</style>